<!--今日销售页面-->
<template>
<el-row class="container">
    <el-col :span="24" style="min-height:60px;height:5%;background-color: #014171;">
        <el-row>
            <el-col :span="10">
                <div class="logo">
                    <el-button type="primary" icon="el-icon-back" @click="showMainPage">&nbsp;&nbsp;{{$t("todaysales.returnBtnName")}}&nbsp;&nbsp;</el-button>
                </div>
            </el-col>
            <el-col :span="14">
                <div class="userinfo">
                    <el-button v-show="enabledPrintReport" type="primary" icon="el-icon-printer" @click="printReport">{{$t("todaysales.reportPrintBtnName")}}</el-button>
                </div>
            </el-col>
        </el-row>
    </el-col>

    <el-col :span="24" style="margin-top:20px;padding-left:20px;padding-right:20px;">
        <choiceStaff ref="choiceStaff" :allowNoChoice="true" :clickEvent="true" :showIcon="false" @click="selectStaff" :checkAuth="true"></choiceStaff>
    </el-col>

    <el-col :span="24" style="height:95%;padding-left:20px;padding-right:20px;">
        <!--列表(查询结果-当前页)-->
        <el-table :data="orders" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width:100%;" stripe border>
            <el-table-column type="index" :index="indexMethod" :label="$t('todaysales.table.xuhaoColumnName')" width="150" sortable>
            </el-table-column>
            <el-table-column prop="orderNum" :label="$t('todaysales.table.ordernumColumnName')" width="200" sortable>
            </el-table-column>
            <el-table-column prop="addTime" :label="$t('todaysales.table.timeColumnName')" min-width="200" sortable>
                <template scope="scope">
                    <el-icon name="time"></el-icon>
                    <span style="margin-left: 10px">{{ scope.row.addTime }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="staffName" :label="$t('todaysales.table.staffColumnName')" min-width="200" sortable>
            </el-table-column>
            <el-table-column prop="totalPrice" :label="$t('todaysales.table.moneyColumnName')" min-width="200" sortable>
            </el-table-column>
            <el-table-column prop="tip" :label="$t('todaysales.table.tipColumnName')" min-width="200" sortable>
            </el-table-column>
            <!--
            <el-table-column :label="$t('todaysales.table.editColumnName')" width="80">
                <template scope="scope">
                    <el-button type="success" icon="edit" size="small" @click="handleEditTipEvent(scope.$index, scope.row)">{{$t("todaysales.table.editColumnValBtnName")}}</el-button>
                </template>
            </el-table-column>
            -->
            <el-table-column :label="$t('todaysales.table.deleteColumnName')" width="80">
                <template scope="scope">
                    <el-button type="danger" icon="delete" size="small" @click="handleDelOrderEvent(scope.$index, scope.row)">{{$t("todaysales.table.deleteColumnName")}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-col :span="24" class="toolbar">
            <el-button v-show="enabledBatchEditTip" type="success" icon="edit" size="small" @click="handleBatchEditTipEvent()">{{$t("todaysales.table.batchEditTipBtnName")}}</el-button>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;">
            </el-pagination>
        </el-col>
    </el-col>
    <batchEditTip ref="batchEditTip"></batchEditTip>
</el-row>
</template>

<script>
import util from '../../common/js/util';
import BatchEditTip from './batchEditTip.vue';
import {
    getTodaySales,
    editOrderTip,
    delOrder,
    printTodaySale
} from '../../api/api';
import ChoiceStaff from '../../components/choiceStaff.vue';
import jwt_decode from 'jwt-decode';
import {
    getLodop
} from '../../common/js/LodopFuncs';

export default {
    components: {
        choiceStaff: ChoiceStaff,
        batchEditTip: BatchEditTip
    },
    data() {
        return {
            staffId: '',
            orders: [],
            total: 0, //列表总条数
            pageSize: 10, //每页条数
            currentPage: 1, //当前页码
            listLoading: true,
            sels: [], //列表选中列
            enabledBatchEditTip: true,
            enabledPrintReport: false
        };
    },
    mounted() {
        //监听键盘按键事件
        let that = this;
        document.onkeydown = function (e) {
            e = window.event || e;
            if (e.keyCode == 27) {
                //判断是否有dialog子元素或者弹窗
                //console.log(this.$refs);
                that.showMainPage();
            }
        }

        if (sessionStorage.getItem('userToken') != null) {
            var userToken = jwt_decode(sessionStorage.getItem("userToken"));
            if (userToken.roleId == 1) {
                this.staffId = userToken.userid;
                this.enabledBatchEditTip = false;
            }
            // if (userToken.roleId == 2) {
            //     this.staffId = userToken.userid;
            //     this.$refs.choiceStaff.invokeStaff(this.staffId);
            // }
        }
        this.getOrders();
    },
    methods: {
        showMainPage() {
            this.$router.push({
                path: '/home'
            });
        },
        getOrders() {
            let para = {
                pageSize: this.pageSize,
                pageNum: this.currentPage,
                staffId: this.staffId
            };
            getTodaySales(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    this.total = res.data.total;
                    this.orders = res.data.list;
                    this.listLoading = false;
                    if (this.total == 0) {
                        this.enabledPrintReport = false;
                    } else {
                        this.enabledPrintReport = true;
                    }
                }
            });
        },
        printReport() {
            let para = {
                staffId: this.staffId
            };
            printTodaySale(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    this.listLoading = false;
                    let LODOP = getLodop(); //调用getLodop获取LODOP对象
                    if (typeof (LODOP) != "undefined") {
                        var initContentTop = 50; //初始化打印主内容的TOP高度
                        var lineHeight = 20; //每行的高度
                        var dateStr = util.formatDate.format(new Date(), 'MM-dd-yyyy'); //美国国家标准时间格式(月日年)
                        var timeStr = util.formatDate.format(new Date(), 'hh:mm:ss');
                        if (this.staffId == "") {
                            //#######管理员-当日销售-打印小票##########
                            LODOP.PRINT_INITA(0, 0, 580, 793, "打印当日销售小票");
                            LODOP.SET_PRINT_PAGESIZE(1, 580, 800, ""); //设置打印页大小(横向或纵向,宽度和高度)
                            LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE", 1);
                            LODOP.ADD_PRINT_HTM(8, 0, "100%", "100%", "<div align=\"center\" style=\"font-weight:bold;\">" + this.$t("todaysales.printReport.shopDayReportTitle") + "</div>");
                            LODOP.ADD_PRINT_LINE(40, -7, 40, 377, 4, 0);
                            LODOP.ADD_PRINT_HTM(initContentTop, 0, "100%", "100%", "<div style=\"font-size:11px;\"><div style=\"float:left;\">" + this.$t("todaysales.printReport.date") + dateStr + "</div><div style=\"float:right;\">" + this.$t("todaysales.printReport.time") + timeStr + "</div></div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 1, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.orderCount") + res.data.orders + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 2, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.cashPay") + util.formatMoney(res.data.cashPay == undefined ? 0 : res.data.cashPay, 2) + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 3, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.creditPay") + util.formatMoney(res.data.creditPay == undefined ? 0 : res.data.creditPay, 2) + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 4, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.giftPay") + util.formatMoney(res.data.giftPay == undefined ? 0 : res.data.giftPay, 2) + "</div>");
                            var isGiftPayLinenum = 0;
                            if (res.data.giftPay != undefined) {
                                isGiftPayLinenum = 2;
                                LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 5, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.giftPayCash") + util.formatMoney(res.data.giftPayCash == undefined ? 0 : res.data.giftPayCash, 2) + "</div>");
                                LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 6, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.giftPayCredit") + util.formatMoney(res.data.giftPayCredit == undefined ? 0 : res.data.giftPayCredit, 2) + "</div>");
                            }
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (5 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.subtotal") + util.formatMoney(res.data.totalprice == undefined ? 0 : res.data.totalprice, 2) + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (6 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.newGiftCardSale") + util.formatMoney(res.data.newGiftCardMoney == undefined ? 0 : res.data.newGiftCardMoney, 2) + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (7 + isGiftPayLinenum), 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.creditCardTip") + util.formatMoney(res.data.tip == undefined ? 0 : res.data.tip, 2) + "</div>");
                            LODOP.ADD_PRINT_LINE(276, -7, 276, 377, 4, 0);
                            LODOP.PRINT();
                        } else {
                            //#######普通员工-当日销售-打印小票##########
                            LODOP.PRINT_INITA(0, 0, 580, 793, "打印当日销售小票");
                            LODOP.SET_PRINT_PAGESIZE(1, 580, 700, ""); //设置打印页大小(横向或纵向,宽度和高度)
                            LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE", 1);
                            LODOP.ADD_PRINT_HTM(8, 0, "100%", "100%", "<div align=\"center\" style=\"font-weight:bold;\">" + this.$t("todaysales.printReport.staffDayReportTitle") + "</div>");
                            LODOP.ADD_PRINT_LINE(40, -7, 40, 377, 4, 0);
                            LODOP.ADD_PRINT_HTM(initContentTop, 0, "100%", "100%", "<div style=\"font-size:11px;\"><div style=\"float:left;\">" + this.$t("todaysales.printReport.date") + dateStr + "</div><div style=\"float:right;\">" + this.$t("todaysales.printReport.time") + timeStr + "</div></div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 1, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.orderCount") + res.data.orders + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 2, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.cashPay") + util.formatMoney(res.data.cashPay == undefined ? 0 : res.data.cashPay, 2) + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 3, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.creditPay") + util.formatMoney(res.data.creditPay == undefined ? 0 : res.data.creditPay, 2) + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 4, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.giftPay") + util.formatMoney(res.data.giftPay == undefined ? 0 : res.data.giftPay, 2) + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 5, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.subtotal") + util.formatMoney(res.data.totalprice == undefined ? 0 : res.data.totalprice, 2) + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 6, 0, "100%", "100%", "<div style=\"font-size:12px;\">" + this.$t("todaysales.printReport.creditCardTip") + util.formatMoney(res.data.tip == undefined ? 0 : res.data.tip, 2) + "</div>");
                            LODOP.ADD_PRINT_LINE(210, -7, 210, 377, 4, 0);
                            LODOP.PRINT();
                        }
                    }
                }
            });
        },
        selectStaff(user) {
            console.log("选中了员工：" + user.realName);
            console.log("选中了员工：" + user.id);
            console.log("选中员工状态：" + user.selected);
            if (user.selected == false) {
                this.staffId = "";
            } else {
                this.staffId = user.id;
            }
            this.getOrders();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getOrders();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getOrders();
        },
        selsChange: function (sels) {
            this.sels = sels;
        },
        //表格中的【序号】列的值生成方式
        indexMethod(index) {
            return index + 1 + (this.currentPage - 1) * this.pageSize;
        },
        handleEditTipEvent(index, row) {
            this.$prompt(this.$t('todaysales.editTipDialog.content'), this.$t('todaysales.editTipDialog.title'), {
                confirmButtonText: this.$t('todaysales.editTipDialog.confirmBtn'),
                cancelButtonText: this.$t('todaysales.editTipDialog.cancelBtn'),
                inputPattern: /^[0-9]*[1-9][0-9]*$/,
                inputErrorMessage: this.$t('todaysales.editTipDialog.validfail')
            }).then(({
                value
            }) => {
                this.listLoading = true;
                let para = {
                    orderId: row.id,
                    tip: value
                };
                editOrderTip(para).then((res) => {
                    this.listLoading = false;
                    this.$message({
                        message: this.$t('todaysales.editTipDialog.successMsg'),
                        type: 'success'
                    });
                    this.getOrders();
                });
            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '取消输入'
                // });
            });
        },
        handleBatchEditTipEvent() {
            this.$refs.batchEditTip.showPage();
        },
        handleDelOrderEvent(index, row) {
            this.$confirm(this.$t('todaysales.delDialog.content'), this.$t('todaysales.delDialog.title'), {
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                let para = {
                    orderId: row.id
                };
                delOrder(para).then((res) => {
                    this.listLoading = false;
                    this.$message({
                        message: this.$t('todaysales.delDialog.successMsg'),
                        type: 'success'
                    });
                    this.getOrders();
                });
            }).catch(() => {

            });
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #012547;
    font-family: Helvetica, Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
}

.nav {
    display: flex;
    justify-content: Center;
    align-items: Center;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    font-size: 48px;
}

.userinfo {
    display: flex;
    justify-content: left;
    align-items: Center;
    text-align: right;
    padding-right: 35px;
    float: right;
    height: 60px;
}

.logo {
    display: flex;
    justify-content: left;
    align-items: Center;
    height: 60px;
    font-size: 26px;
    padding-left: 20px;
    padding-right: 20px;
}
</style>
